<%--
  Created by IntelliJ IDEA.
  User: 云哥
  Date: 2023/6/5
  Time: 9:22
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>文件上传</title>
    <style>
        img {
            border: 1px solid #CCCCCC;
        }

        div {
            margin: 10px;
        }
    </style>
</head>
<body>
<form action="fileUpload" method="post" enctype="multipart/form-data">
    <div>
        <input type="file" name="imgFile"  accept="image/jpeg" required onchange="preView(this)">
    </div>
    <div id="showImg">
        <img id="bookImg" src="" alt="" width="150" height="200">
    </div>
    <div>
        <button type="submit">开始上传</button>
    </div>
</form>
<p style="color: red">${requestScope.msg}</p>
<script src="js/jquery-1.12.4.js"></script>
<script>
    function preView(fileInput) {
        let files = $(fileInput).get(0).files;
        let imgUrl = window.webkitURL.createObjectURL(files[0]);
        $('#bookImg').attr('src', imgUrl);
    }
</script>
</body>

</html>
